<template>
  <!-- Vue3组件不在需要根标签 -->
  <p class="title">{{ count }}</p>
  <button @click="handleClick">按钮</button>

  <ul>
    <li v-for="(value, key) in person" :key="key">{{ key }} -- {{ value }}</li>
  </ul>
  <button @click="add">新增</button>
</template>

<script lang="ts">
/*
  Vue2 中 data：
    1. 对象形式
    2. 函数形式
      但是组件中只能使用函数形式
  
  Vue3 中 data:
    只能写函数形式

  data中的数据是响应式数据
  什么是响应式数据？更新响应式数据，数据会更新，用户界面也会更新

  Vue2 中 响应式数据：Object.defineProperty
    问题：新增数据不是响应式的
    解决：this.$set() 将新增数据设置成响应式的

  Vue3 中 响应式数据：Proxy
    原先定义的还是新增数据都是响应式的
    删除$set方法
*/
export default {
  name: "App",
  data() {
    return {
      count: 0,
      person: {
        name: "静哥",
        // age: 0,
      },
    };
  },
  methods: {
    handleClick() {
      this.count++;
    },
    add() {
      // ts类型报错，不会影响程序运行
      this.person.age = 40;
    },
  },
};
</script>

<style scoped>
.title {
  color: yellowgreen;
}
</style>
